// @ts-nocheck
import React from "react";
import { Modal, Button } from "antd";
import Form from "@/components/Form";
import styles from './index.module.less'

const getFormProps = ({
  name = "form",
  items,
  initialValues,
  onCancel,
  onFinish = (values) => {
    console.log("Success:", values);
  },
  onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  },
  bottom = {
    render: () => (
      <footer className={styles["form-footer"]}>
        <Button type="gray" htmlType="reset" onClick={onCancel}>
          {onCancel ? "取消" : "重置"}
        </Button>
        <Button type="primary" htmlType="submit" style={{ marginLeft: 10 }}>
          保存
        </Button>
      </footer>
    ),
  },
  layout = "horizontal" /*  'vertical', 'inline', */,
  wrapperCol = { span: 5 },
  labelCol = { span: 3 },
  labelAlign = "left",
}) => ({
  name,
  children: bottom ? [...items, bottom] : items,
  initialValues,
  onFinish,
  onFinishFailed,
  layout,
  wrapperCol,
  labelCol,
  labelAlign,
});

export default ({
  title,
  items = [],
  record = {},
  visible,
  onFinish,
  onFinishFailed,
  onCancel,
  width="440px"
}) => {
  const initialize = (items, record) =>
    items.map((item) => ({
      ...item,
      value: record && record[item.name] || item.value,
    }));

    const formProps = getFormProps({
      items: initialize(items, record),
      onFinish,
      onFinishFailed,
      onCancel,
      labelAlign: "right",
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
    })

  return (
    <Modal
      title={title}
      visible={visible}
      onCancel={onCancel}
      wrapClassName={styles["form-modal"]}
      width={width}
      footer={null}
      maskClosable={false}
    >
      <Form
        {...formProps}
      />
    </Modal>
  );
};
